<template>
    <div class="wrap">
        <h1>slotdemo</h1>
        <br><br>
        <Child v-for="user in userList" :key="user.id" :user="user" v-slot="{ accountJoin }">
            <UWechat v-if="accountJoin.wechat" :accountJoin="accountJoin"></UWechat>
            <UQQ v-if="accountJoin.qq" :accountJoin="accountJoin"></UQQ>
            <USina v-if="accountJoin.sina" :accountJoin="accountJoin"></USina>
        </Child>
    </div>
</template>

<script>
// 这里的判断条件为什么不放到组件内部,非要放到父组件中,闲的???
// 不是,目的是为了以后如果兼容其他平台的账号,那么不需要修改Child组件
//      只需要修改父组件slot传入的内容即可
import Child from './components/Child'
import UWechat from './components/UWechat'
import UQQ from './components/UQQ'
import USina from './components/USina'
export default {
    name: "SlotDemo",
    components: { Child, UWechat, UQQ, USina },
    data() {
        return {
            userList: [
                {
                    id: 1001,
                    username: "admin",
                    intro: "这个是管理员账号,请勿修改",
                    accountJoin: {
                        wechat: "admin-wechat"
                    },
                    createDate: 1645184446523
                },
                {
                    id: 1002,
                    username: "zhangsan",
                    intro: "一个乐观的开发者",
                    accountJoin: {
                        qq: "465258674"
                    },
                    createDate: 1645182446523
                },
                {
                    id: 1003,
                    username: "lisi",
                    intro: "这一个沮丧的开发者",
                    accountJoin: {
                        sina: "会飞的猪",
                        email: "huifeidezhu@163.com"
                    },
                    createDate: 1645144446523
                },
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.wrap {
    width: 1200px;
    margin: 0 auto;
}
</style>